<template>
  <div id="goodsrank">
    <search
      v-model="valueSerach"
      :active="active"
      @returnBack="returnBack"
      @returnBack1="returnBack1"
      @inputValue="inputValue"
    />
    <!-- tab -->
    <van-tabs
      :offset-top="$tabNavTopVal"
      v-model="active"
      title-active-color="#222"
      title-inactive-color="#888"
      sticky
      swipeable
      swipe-threshold="3"
    >
      <van-tab title="全网销量榜" name="goodsTiktokSales">
        <!-- 榜单 选择 -->
        <goodsTiktokSales v-if="active == 'goodsTiktokSales'" :valueSerach="valueSerach" ref="refs0" />
        <!-- <Sales></Sales> -->
      </van-tab>
      <van-tab title="带货视频榜" name="goodsCargoVideo">
        <!-- 榜单 选择 -->
        <goodsCargoVideo v-if="active == 'goodsCargoVideo'" :valueSerach="valueSerach" ref="refs1" />
      </van-tab>
      <!-- <van-tab title="达人销量榜" name="goodsTalentSales">
        <goodsTalentSales v-if="active == 'goodsTalentSales'" :valueSerach="valueSerach" ref="refs2" />
      </van-tab>-->
      <van-tab title="抖音品牌榜" name="newDouyin">
        <newDouyin v-if="active == 'newDouyin'" :valueSerach="valueSerach" ref="refs3" />
      </van-tab>
      <van-tab title="小店排行榜" name="newbrand">
        <newbrand v-if="active == 'newbrand'" :valueSerach="valueSerach" ref="refs4" />
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import search from '@/component/search';
import goodsTiktokSales from './goodsTiktokSales';
import goodsCargoVideo from './goodsCargoVideo';
// import goodsTalentSales from "./goodsTalentSales";
import newDouyin from './newDouyin';
import newbrand from './newbrand';
export default {
  name: '',
  components: {
    search,
    goodsTiktokSales,
    goodsCargoVideo,
    // goodsTalentSales,
    newDouyin, //抖音品牌榜
    newbrand
  },

  data() {
    return {
      valueSerach: '',
      loading_01: false,
      jurisdiction: false, //权限
      tit1: '筛选',
      tit2: '全部',
      title1: '商品类目',
      source: '全部',
      source_01: '全部',
      goodsKind: '全部',
      goodslist: [], //全部商品
      goodslist1: [],
      CategoryId: 0, // "商品id"
      CategoryId_01: 0, // "商品id"
      RankType: 1, //判断日月周榜单
      Time: '', //时间
      keyword: '',
      page: 1,
      Age: '不限',
      Gender: '不限',
      //  ss
      sourceList: ['全部', '京东', '淘宝', '小店', '天猫', '苏宁', '考拉'],
      title: '日榜',
      value: '',
      active: 'goodsTiktokSales',
      ProFrom: -1, //商品来源 京东=0,淘宝=1,小店=2,天猫=3,苏宁=4,考拉=5
      sstt: ['ss1', 'ss2', 'ss3', 'ss4'],
      num: ['num1', 'num2', 'num3'],
      page: 1,
      count: '',
      table_data01: [],
      table_data02: [],
      dataList: [],
      //触底
      loading: false,
      finished: false,
      refreshing: false,
      pageSize: 50,
      isQzss: false
    };
  },
  computed: {},
  watch: {
    active: function (newValue, oldValue) {
      if (window.pageYOffset != 0) {
        window.pageYOffset = 10;
      }
      this.finished = false;
      this.valueSerach = '';
      this.keyword = '';
      this.jurisdiction = false;
      this.page = 1;
      this.CategoryId = 0;
      this.RankType = 1;
    }
  },
  activated() {
    if (this.$route.query.tab != undefined) {
      this.active = this.$route.query.tab;
    }
  },
  created() {},
  mounted() {},

  methods: {
    returnBack(keyword) {
      console.log();
      // this.page = 1;
      this.keyword = keyword;
      if (this.active == 'goodsTiktokSales') {
        this.$refs.refs0.searchKey(this.keyword);
      } else if (this.active == 'goodsCargoVideo') {
        this.$refs.refs1.searchKey(this.keyword);
      } else if (this.active == 'goodsTalentSales') {
        this.$refs.refs2.searchKey(this.keyword);
      } else if (this.active == 'newDouyin') {
        this.$refs.refs3.searchKey(this.keyword);
      } else if (this.active == 'newbrand') {
        this.$refs.refs4.searchKey(this.keyword);
      }
    },
    returnBack1(keyword) {
      this.keyword = keyword;
    },
    // 搜索框为空的时候榜单刷新页面
    inputValue(val) {
      this.valueSerach = val;
    },
  }
  // destroyed(){
  //   // this.$off();
  // }
};
</script>
<style lang="less" scoped>
//@import url();
#goodsrank {
  .nothingWl {
    font-size: 0.346667rem;
    color: #888;
    padding-bottom: 1.6rem;
    span {
      color: #fd7f2c;
    }
  }
  a {
    text-decoration: none;
  }
  // overflow: hidden;
  min-height: 100vh;
  background: #f1f1f1;
  #sales {
    background: #f1f1f1;
    .rank1 {
      background: #f1f1f1;
      height: 0.466667rem;
      line-height: 0.466667rem;

      box-sizing: border-box;
      border-radius: 0.226667rem;
      position: absolute;
      top: 0.133333rem;
      left: 0.093333rem;

      -webkit-text-size-adjust: none;
      padding-left: 0.12rem;
      padding-right: 0.12rem;
      text-align: center;
      p {
        width: 100%;
        height: 100%;
        position: relative;
        padding-top: 0.1rem;
        padding-bottom: 0.08rem;
        font-size: 0.373333rem;
        height: 0.466667rem;
        line-height: 100%;
        text-align: center;
        font-family: DINPro-Medium;
        color: #666666;
      }
    }
    a {
      text-decoration: none;
    }
    .box {
      width: 92%;
      margin: 0 auto;
      display: flex;
      border: 1px solid transparent;
      border-radius: 8px;
      background: #fff;
      margin-bottom: 0.2rem;
      // padding-bottom: 0.2rem;
      // 图片
      .boxleft {
        width: 2.667rem;
        position: relative;
        .rank {
          position: absolute;
          top: 0.14rem;
          left: 0.1rem;
          z-index: 1;
          width: 0.62rem;
          height: 0.52rem;
          background: url(../../assets/two/fire.png) no-repeat center;
          background-size: 100% 100% !important;
          box-sizing: 100%;
          p {
            font-family: DINPro-Medium;
            font-size: 0.373333rem;
            color: #666666;
            text-align: center;
            line-height: 0.56rem;
          }
        }
        > .aa {
          width: 2.133rem;
          height: 2.133rem;
          line-height: 2.133rem;
          display: block;

          margin: 0.266rem 0 0 0.266rem;
          > img {
            width: 100%;
            height: 100%;
            display: inline-block;
            border-radius: 0.266667rem;
          }
        }
      }
      // 介绍
      .boxright {
        width: 6.53rem;
        .tit {
          width: 6rem;
          // line-height: 0.373rem;
          font-size: 0.4rem;
          padding: 0.33rem 0 0.2rem 0;
          color: #222;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        // 价格+佣金率
        .price {
          display: flex;
          font-family: Dinpro-medium;
          span {
            font-size: 0.346667rem;
            color: #ff0000;
          }
          .prpr {
            // width: 0.733rem;
            height: 0.373rem;
            line-height: 0.373rem;
            font-size: 0.48rem;
            text-align: center;
            color: #ff0000;
          }
          .pryj {
            margin-left: 0.293rem;
            font-size: 0.293rem;
            color: #888;
            line-height: 0.32rem;
            padding-top: 0.0266rem;
            > span {
              display: inline-block;
              margin-left: 0.16rem;
              font-size: 0.266rem;
              color: #fd7f2c;
            }
          }
        }
        // 浏览量 +数字化信息
        .num {
          padding-top: 0.1rem;
          display: flex;
          .one > p {
            font-family: Dinpro-medium;
          }
          .one,
          .two {
            width: 2.213rem;
          }
          .three {
            width: 2rem;
          }
          .one p,
          .two p,
          .three p {
            font-size: 0.373333rem;
            color: #222;
            text-align: left;
            font-family: Dinpro-medium;
          }
          .one span,
          .two span,
          .three span {
            display: block;
            font-size: 0.293333rem;
            line-height: 0.613rem;
            text-align: left;
            padding-bottom: 0.07rem;
          }
        }
      }
    }
    .bot > {
      display: flex;
      width: 9.2rem;
      height: 0.88rem;
      line-height: 0.906667rem;
      background-color: #f4f9ff;
      border-radius: 0.44rem;
      border: solid 0.02rem #1779ff;
      margin: 0 auto;
      margin-bottom: 1.506667rem;

      p {
        margin-left: 0.6rem;
        font-size: 0.346667rem;
        font-weight: normal;
        font-stretch: normal;
        letter-spacing: 1px;
        color: #222222;
      }
      a {
        font-size: 0.346667rem;
        color: #1779ff;
      }
    }
  }
  #commerce {
    background: #f1f1f1;
    min-height: 100vh;
    .rank1 {
      background: #f1f1f1;
      height: 0.466667rem;
      line-height: 0.58rem;
      border-radius: 0.226667rem;
      position: absolute;
      top: -0.183333rem;
      left: 0.093333rem;
      font-size: 0.373333rem;
      padding-left: 0.12rem;
      padding-right: 0.12rem;
      text-align: center;
      font-family: DINPro-Medium;
      color: #666666;
    }
    a {
      text-decoration: none;
    }
    .box {
      width: 9.2rem;
      margin: 0 auto;
      // padding: 0.266667rem 0;
      display: flex;
      border: 1px solid transparent;
      border-radius: 8px;
      background: #fff;
      margin-bottom: 0.2rem;
      padding-bottom: 0.2rem;
      // 图片
      .boxleft {
        margin-top: 0.266667rem;
        width: 2.667rem;
        position: relative;
        .rank {
          position: absolute;
          top: -0.2rem;
          left: 0.1rem;
          z-index: 1;
          width: 0.62rem;
          height: 0.52rem;
          background: url(../../assets/two/fire.png) no-repeat center;
          background-size: 100% 100% !important;
          box-sizing: 100%;
          p {
            font-family: DINPro-Medium;
            font-size: 0.373333rem;
            color: #666666;
            text-align: center;
            line-height: 0.56rem;
          }
        }
        .aa {
          width: 2.13rem;
          line-height: 2.666rem;
          display: block;
          margin: 0rem 0 0 0.28rem;
          border-radius: 0.266667rem;
          overflow: hidden;
        }
        .play {
          display: block;
          width: 0.613rem;
          height: 0.613rem;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          z-index: 1;
          img {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
          }
        }
        img {
          width: 100%;
          height: 100%;
          display: inline-block;
        }
      }
      // 介绍
      .boxright {
        width: 6.53rem;
        margin-top: 0.266667rem;
        .tit {
          padding-top: 0.086667rem;
          width: 6rem;
          height: 0.373rem;
          line-height: 0.373rem;
          font-size: 0.4rem;
          color: #222;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        // 价格+佣金率
        .price1 {
          position: relative;
          padding-right: 0.213333rem;
          padding-top: 0.266667rem;
          height: 1.133333rem;
          .prpr1 {
            position: absolute;
            left: 0;
            top: 0.3rem;
          }
          div {
            font-size: 0.373333rem;
            line-height: 0.483333rem;
            color: #666666;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
          }
        }
        // 浏览量 +数字化信息
        .num {
          padding-top: 0.273rem;
          display: flex;
          height: 0.733333rem;
          .one,
          .two {
            width: 2.213rem;

            // font-family: Dinpro-medium;
          }
          .one p,
          .two p {
            font-size: 0.373333rem;
            color: #222;
            font-family: Dinpro-medium;
            text-align: left;
            line-height: 0.266rem;
          }
          .one span,
          .two span {
            display: block;
            font-size: 0.293333rem;
            line-height: 0.613rem;
            text-align: left;
            padding-bottom: 0.1067rem;
          }
        }
      }
    }
  }
  .bot1 {
    display: flex;
    width: 9.2rem;
    height: 0.88rem;
    line-height: 0.88rem;
    background-color: #f4f9ff;
    border-radius: 0.44rem;
    border: solid 0.02rem #1779ff;
    margin: 0 auto;
    margin-bottom: 1.506667rem;

    p {
      margin-left: 0.6rem;
      font-size: 0.346667rem;
      font-weight: normal;
      font-stretch: normal;
      letter-spacing: 1px;
      color: #222222;
    }
    a {
      font-size: 0.346667rem;
      color: #1779ff;
      text-decoration: none;
    }
  }
  .bottom_Collection {
    img {
      margin: 0 auto;
      width: 4rem;
      height: 3.2rem;
      margin-top: 4rem;
      display: block;
    }
    p {
      text-align: center;
      font-size: 0.346667rem;
      line-height: 0.4rem;
      color: #888888;
    }
    span {
      color: #fd7f2c;
    }
  }
  .one_1 {
    span {
      font-size: 0.293333rem;
      color: #888888;
    }
  }
  .choice {
    width: 5.333333rem;
  }
  #TanlentSales {
    .rank1 {
      background: #f1f1f1;
      height: 0.466667rem;
      line-height: 0.58rem;
      border-radius: 0.226667rem;
      position: absolute;
      top: 0.133333rem;
      left: 0.093333rem;
      font-size: 0.373333rem;
      padding-left: 0.12rem;
      padding-right: 0.12rem;
      text-align: center;
      text-align: center;
      font-family: DINPro-Medium;
      color: #666666;
    }
    margin: 0 auto;

    width: 9.2rem;
    margin-bottom: 1.5rem;
    .box {
      display: flex;
      width: 9.2rem;
      height: 2.106667rem;
      background-color: #ffffff;
      border-radius: 0.133333rem;
      margin-bottom: 0.2rem;
      padding-top: 0.093333rem;
      .img_01 {
        margin-left: 0.266667rem;
        width: 1.173333rem;
        height: 1.17333rem;
        background-color: #e1007e;
        border: solid 1px #e5e5e5;
        border-radius: 50%;
        margin-top: 0.226667rem;
      }
      .boxright {
        font-size: 0.4rem;
        color: #222222;
        margin-left: 0.253333rem;
      }
      .boxrightTop {
        display: flex;
      }
      .tit_01 {
        font-size: 0.4rem;
        max-width: 5.666667rem;
        letter-spacing: 1px;
        color: #222222;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        line-height: 0.933333rem;
      }
      .category_01 {
        text-align: center;
        margin-top: 0.266667rem;
        display: inline-block;
        padding-left: 0.133333rem;
        padding-right: 0.133333rem;
        height: 0.466667rem;
        line-height: 0.48rem;
        background-color: #fff1e7;
        border-radius: 0.226667rem;
        border: solid 0.013333rem #fd7f2c;
        font-size: 0.306667rem;
        letter-spacing: 1px;
        color: #fd7f2c;
        margin-top: 0.2rem;
        margin-left: 0.133333rem;
      }
      .num {
        .one {
          font-family: Dinpro-medium;
          display: inline-block;
          width: 3.16rem;
          padding-top: 0.033333rem;
          p {
            font-size: 0.373333rem;
            color: #222222;
          }
          span {
            font-size: 0.293333rem;
            color: #888888;
            font-weight: normal !important;
          }
        }
        .two {
          display: inline-block;
          font-family: Dinpro-medium;
          span {
            font-size: 0.293333rem;
            color: #888888;
            font-weight: normal !important;
          }
        }
      }
      .boxleft {
        position: relative;
        .rank {
          position: absolute;
          top: 0;
          left: 0.13rem;
          z-index: 1;
          width: 0.62rem;
          height: 0.52rem;
          background: url(../../assets/two/fire.png) no-repeat center;
          background-size: 100% 100% !important;
          box-sizing: 100%;
          p {
            font-family: DINPro-Medium;
            font-size: 0.373333rem;
            color: #666666;
            text-align: center;
            line-height: 0.56rem;
          }
        }
        > .aa {
          width: 2.133rem;
          line-height: 2.133rem;
          display: block;
          margin: 0.266rem 0 0 0.266rem;
          > img {
            width: 100%;
            display: inline-block;
          }
        }
      }
    }
  }
  .color {
    color: #888;
  }
  .choice01 {
    width: 7.5rem !important;
  }
}
</style>
